<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>工单</title>
    <link rel="stylesheet" href="static/zui/zui.css">
    <link rel="stylesheet" href="static/style.css">
    <script src="static/zui/zui.js"></script>
    <script src="static/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="container-main">
    <div class="container-fluid tickets-container flex col">
        <div class="filter">
            <form class="form form-horz text-md">
                <div class="form-row">
                    <label>账号</label>
                    <div class="w-60 form-group">
                        <input class="form-control" type="text" id="smallInput" placeholder="单号">
                    </div>
                    <label>类型</label>
                    <div class="w-32 form-group">
                        <select class="form-control">
                            <option value="all">全部</option>
                            <option value="app">客户端问题</option>
                            <option value="account">账户问题</option>
                            <option value="game">游戏问题</option>
                            <option value="resource">资源问题</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <label>状态</label>
                    <div class="w-28 form-group">
                        <select class="form-control">
                            <option value="all">全部</option>
                            <option value="processing">待处理</option>
                            <option value="resolved">处理中</option>
                            <option value="archived">已归档</option>
                            <option value="solved">已解决</option>
                            <option value="closed">已关闭</option>
                        </select>
                    </div>
                    <label>日期范围</label>
                    <div class="w-96 form-group">
                        <div class="input-group">
                            <div class="input-control has-suffix-icon">
                                <input id="startDate" type="date" class="rounded-r-none form-control"
                                       placeholder="开始时间">
                            </div>
                            <span class="input-group-addon">至</span>
                            <div class="input-control has-suffix-icon">
                                <input id="endDate" type="date" class="rounded-l-none form-control"
                                       placeholder="结束时间">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="size-sm">
                <button type="button" class="btn primary"><i class="icon icon-search"></i>查找</button>
                <button type="button" class="btn gray"><i class="icon icon-refresh"></i>重置</button>
                <button type="button" class="btn success" data-toggle="modal" data-target="#createTicketDialog"><i
                        class="icon icon-plus"></i>新增
                </button>
            </div>
        </div>
        <div class="table-responsive text-md">
            <table class="table bordered">
                <thead>
                <tr>
                    <th class="w-40">单号</th>
                    <th class="w-28">类型</th>
                    <th>标题</th>
                    <th class="w-60">时间</th>
                    <th class="w-20">状态</th>
                    <th class="w-16">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs" data-toggle="modal" data-target="#viewTicketDialog">查看</button>
                    </td>
                </tr>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs">查看</button>
                    </td>
                </tr>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs">查看</button>
                    </td>
                </tr>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs">查看</button>
                    </td>
                </tr>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs">查看</button>
                    </td>
                </tr>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs">查看</button>
                    </td>
                </tr>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs">查看</button>
                    </td>
                </tr>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs">查看</button>
                    </td>
                </tr>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs">查看</button>
                    </td>
                </tr>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs">查看</button>
                    </td>
                </tr>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs">查看</button>
                    </td>
                </tr>
                <tr>
                    <td>W7815478123</td>
                    <td><span class="label primary-pale">客户端问题</span></td>
                    <td>这是一个客户端问题</td>
                    <td>2021-01-01 12:00:00</td>
                    <td><span class="label danger-pale">待处理</span></td>
                    <td>
                        <button type="button" class="btn primary-outline size-xs">查看</button>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="6">
                        <div class="pull-right text-sm">
                            <nav class="pager">
                                <div>共 42 项</div>
                                <a class="btn ghost size-sm">第一页</a>
                                <a class="btn ghost size-sm square" title="上一页"><i class="icon icon-angle-left"></i></a>
                                <a class="btn ghost size-sm active">1</a>
                                <a class="btn ghost size-sm">2</a>
                                <a class="btn ghost size-sm">3</a>
                                <a class="btn ghost size-sm">4</a>
                                <a class="btn ghost size-sm square" title="下一页"><i class="icon icon-angle-right"></i></a>
                                <a class="btn ghost size-sm">最后一页</a>
                            </nav>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div class="footer">
    由&nbsp;<a href="https://acgbh.com" target="_blank">游戏黑域</a>&nbsp;提供支持·DeviceId:455623838039684
</div>

<!-- Create ticket -->
<div class="modal common-dialog" id="createTicketDialog">
    <div class="modal-dialog shadow size-sm bd-none">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title flex row justify-center">创建新工单</div>
            </div>
            <div class="modal-actions top-1.5 right-1.5">
                <button type="button" class="btn square ghost" data-dismiss="modal"><span class="close"></span></button>
            </div>
            <div class="modal-body flex col">
                <form class="form form-horz text-md">
                    <div class="form-row">
                        <label>问题</label>
                        <div class="form-group">
                            <input class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-row">
                        <label>类型</label>
                        <div class="form-group">
                            <select class="form-control w-32">
                                <option value="all">全部</option>
                                <option value="processing">待处理</option>
                                <option value="resolved">处理中</option>
                                <option value="archived">已归档</option>
                                <option value="solved">已解决</option>
                                <option value="closed">已关闭</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row" style="align-items: flex-start!important;">
                        <label>内容</label>
                        <div class="form-group">
                            <textarea rows="10" class="form-control" style="resize: none;"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-end">
                <button type="button" class="btn size-md text-md" data-dismiss="modal">关闭</button>
                <button type="button" class="btn size-md text-md primary">提交</button>
            </div>
        </div>
    </div>
</div>


<!-- Create ticket -->
<div class="modal common-dialog" id="viewTicketDialog">
    <div class="modal-dialog shadow size-sm bd-none">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title flex row justify-center">工单详情</div>
            </div>
            <div class="modal-actions top-1.5 right-1.5">
                <button type="button" class="btn square ghost" data-dismiss="modal"><span class="close"></span></button>
            </div>
            <div class="modal-body flex col text-md">
                <div class="ticket-info">
                    <table class="table bordered">
                        <tbody>
                            <tr>
                                <td class="w-16">标题</td>
                                <td colspan="6">这是一个客户端问题</td>
                            </tr>
                            <tr>
                                <td class="w-16">类型</td>
                                <td><span class="label primary-pale">客户端问题</span></td>
                                <td class="w-16">时间</td>
                                <td>2021-01-01 12:00:00</td>
                                <td class="w-16">状态</td>
                                <td><span class="label danger-pale">待处理</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="ticket-chat chat-container">
                    <div class="user">
                        <div class="bubble">你好</div>
                    </div>
                    <div class="assistant">
                        <div class="bubble">你好</div>
                    </div>
                    <div class="system">
                        <div class="bubble">系统消息：你好</div>
                    </div>
                    <div class="assistant">
                        <div class="bubble">你好</div>
                    </div>
                    <div class="system">
                        <div class="bubble">系统消息：你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="assistant">
                        <div class="bubble">你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                    <div class="user">
                        <div class="bubble">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
                    </div>
                </div>
            </div>
            <div class="chat-sender flex row justify-center">
                <input type="text" class="form-control" placeholder="请输入内容">
                <button type="button" class="btn size-md text-md primary"><i class="icon icon-plan"></i></button>
            </div>
            <div class="modal-footer justify-end">
                <button type="button" class="btn size-md text-md" data-dismiss="modal">关闭</button>
                <button type="button" class="btn size-md text-md primary">提交</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>